
<template>
  <div class="dingyue">
       <header class="header">
       <router-link to='sousuo'>
           <div class="left">
            <img src="../assets/img/SearchIcon.png" >
          </div>
       </router-link>
        
        <ul class="center">
        	<router-link to='zhibo'>
        		<li class="list">直播</li>
        	</router-link>
        	
        	<router-link to='pindao'>
        		<li class="list">频道</li>
            
        	</router-link>
        	
        	<router-link to='tuijian'>
        		
            <li class="list">推荐</li>
            
        	</router-link>
        	
        	<router-link to='dingyue'>
        		
            <li class="list active">订阅</li>
        	</router-link>
            
           
            
        </ul>
        
        <div class="right">
            <img src="../assets/img/zhuboRight.png">
        </div>
    </header>
    
    <section class="section">
        <ul class="nav">
            <li class="list">
                <span class="img"><img src="../assets/img/download.png"></span>
                <span class="content">下载列表</span>
            </li>
            <li class="list">
                <span class="img"><img src="../assets/img/aixin.png"></span>
                <span class="content">已订阅博客</span>
                
            </li>
            <li class="list">
                <span class="img"><img src="../assets/img/history.png"></span>
                <span class="content">历史收藏</span>
            </li>
            <li class="list">
                <span class="img"><img src="../assets/img/shouchang.png"></span>
                <span class="content">收藏列表</span>
            </li>
        </ul>
        
        
        
        <main class="main">
            <div class="title">为你推荐以下节目</div>
            
            <div class="jiemu">
                <div class="img"><img src="../assets/img/touxiangtou.png" ></div>
                <div  class="content">
                    <div class="tittle">[春季研习]这样吵架，能让你有好的人缘</div>
                    <div class="neme">安安老师-心安理得<span class="date">2017-03-23</span></div>
                
                    <div class="qita">
                   
                        <span class="img"><img src="../assets/img/shipin.png" alt=""></span>
                        <span class="num">46066</span>

                        <span class="img"><img src="../assets/img/jishi.png" alt=""></span>
                        <span class="num">20'32"</span>

                        <span class="img"><img src="../assets/img/xinxixin.png" alt=""></span>
                        <span class="num">30</span>
                    </div>
                </div>
                
            </div>
            
            <div class="jiemu">
                <div class="img"><img src="../assets/img/touxiangtou.png" ></div>
                <div  class="content">
                    <div class="tittle">[春季研习]这样吵架，能让你有好的人缘</div>
                    <div class="neme">安安老师-心安理得<span class="date">2017-03-23</span></div>
                
                    <div class="qita">
                   
                        <span class="img"><img src="../assets/img/shipin.png" alt=""></span>
                        <span class="num">46066</span>

                        <span class="img"><img src="../assets/img/jishi.png" alt=""></span>
                        <span class="num">20'32"</span>

                        <span class="img"><img src="../assets/img/xinxixin.png" alt=""></span>
                        <span class="num">30</span>
                    </div>
                </div>
                
            </div>
            
            <div class="jiemu">
                <div class="img"><img src="../assets/img/touxiangtou.png" ></div>
                <div  class="content">
                    <div class="tittle">[春季研习]这样吵架，能让你有好的人缘</div>
                    <div class="neme">安安老师-心安理得<span class="date">2017-03-23</span></div>
                
                    <div class="qita">
                   
                        <span class="img"><img src="../assets/img/shipin.png" alt=""></span>
                        <span class="num">46066</span>

                        <span class="img"><img src="../assets/img/jishi.png" alt=""></span>
                        <span class="num">20'32"</span>

                        <span class="img"><img src="../assets/img/xinxixin.png" alt=""></span>
                        <span class="num">30</span>
                    </div>
                </div>
                
            </div>
            
            <div class="jiemu">
                <div class="img"><img src="../assets/img/touxiangtou.png" ></div>
                <div  class="content">
                    <div class="tittle">[春季研习]这样吵架，能让你有好的人缘</div>
                    <div class="neme">安安老师-心安理得<span class="date">2017-03-23</span></div>
                
                    <div class="qita">
                   
                        <span class="img"><img src="../assets/img/shipin.png" alt=""></span>
                        <span class="num">46066</span>

                        <span class="img"><img src="../assets/img/jishi.png" alt=""></span>
                        <span class="num">20'32"</span>

                        <span class="img"><img src="../assets/img/xinxixin.png" alt=""></span>
                        <span class="num">30</span>
                    </div>
                </div>
                
            </div>
            
            <div class="jiemu">
                <div class="img"><img src="../assets/img/touxiangtou.png" ></div>
                <div  class="content">
                    <div class="tittle">[春季研习]这样吵架，能让你有好的人缘</div>
                    <div class="neme">安安老师-心安理得<span class="date">2017-03-23</span></div>
                
                    <div class="qita">
                   
                        <span class="img"><img src="../assets/img/shipin.png" alt=""></span>
                        <span class="num">46066</span>

                        <span class="img"><img src="../assets/img/jishi.png" alt=""></span>
                        <span class="num">20'32"</span>

                        <span class="img"><img src="../assets/img/xinxixin.png" alt=""></span>
                        <span class="num">30</span>
                    </div>
                </div>
                
            </div>
            
            <div class="jiemu">
                <div class="img"><img src="../assets/img/touxiangtou.png" ></div>
                <div  class="content">
                    <div class="tittle">[春季研习]这样吵架，能让你有好的人缘</div>
                    <div class="neme">安安老师-心安理得<span class="date">2017-03-23</span></div>
                
                    <div class="qita">
                   
                        <span class="img"><img src="../assets/img/shipin.png" alt=""></span>
                        <span class="num">46066</span>

                        <span class="img"><img src="../assets/img/jishi.png" alt=""></span>
                        <span class="num">20'32"</span>

                        <span class="img"><img src="../assets/img/xinxixin.png" alt=""></span>
                        <span class="num">30</span>
                    </div>
                </div>
                
            </div>
            
            
        </main>
        
        
    </section>
    
    <footer class="footer">
        <div class="img"><img src="../assets/img/footer.png" alt=""></div>
        <div></div>
    </footer>
    
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import '.././assets/css/reset.css';    
@import '.././assets/less/style.less';
@import '.././assets/less/header.less';  
    .header{
        margin-bottom: 0;
    }

    .section{
        .nav{
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            margin: 0 auto;
            .px2rem(width,680);
            .list{
                .px2rem(width,325);
                .px2rem(height,75);
                .px2rem(line-height,75);
                text-align: center;
                background: #f1efe4;
                .margin-right(10);
                .margin-bottom(50);
                .border-radius(10);
                .webkit();
                justify-content: center;
                align-items: center;
                .content{
                    .px2rem(padding-left,50);
                    opacity: 0.5;
                }
           }
        }
       
        .main{
            .padding-left(20);
            .title{
                .px2rem(height,100);
                .px2rem(line-height,100);
                opacity: 0.5;
                font-weight: bold;
                .font-size(28);
            }
            
            .jiemu{
                .margin-bottom(50);
                .webkit();
                align-items: center;
                .content{
                    flex: 1;
                    .padding-left(24);
                    
                    .tittle{
                        .px2rem(height,40);
                        .font-size(24);
                        opacity: 0.8;
                        font-weight: bold;
                    }
                    .neme{
                       
                        .px2rem(height,40);
                        .font-size(24);
                        opacity: 0.5;
                    }
                }
                
                .qita{
                    opacity: 0.5;
                    .num{
                        .padding-right(20);
                    }
                }
            }
            
        }
        
    }
    
    
    .footer{
        position: fixed;
        .bottom(0);
        .webkit();
        width: 100%;
        .img{
            flex: 1;
            width: 100%;
            img{
                width: 100%;
            }
            
        }
    }
</style>


      